<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import { FILE_URL, SYSTEM_CONFIG, USER_INFO } from '@/api/config.js'
import user from '@/api/user.js'

// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const state = reactive({
  agent: false,
  currentIndex: 0,
  payPrice: '0',
  vipId: 0,
  vipList: [],
  vipEquity: [],
  paidVipAgreement: '',
  userInfo: {
    nickname: '',
    avatar: '',
    vip_expire_time: '',
  },
})

const clickVip = (index: number) => {
  state.currentIndex = index
  state.payPrice = state.vipList[index].price
  state.vipId = state.vipList[index].id
}

const tabbarItemClass = (index?: number) => {
  if (index === state.currentIndex) {
    return 'tn-p-sm tn-text-center tag-select'
  } else {
    return 'tn-p-sm tn-text-center tag-select-no'
  }
}

const vipPackage = () => {
  user
    .vipPackage()
    .then((res) => {
      state.vipList = res.data
      state.payPrice = res.data[0].price
      state.vipId = res.data[0].id
    })
    .catch((err) => {
      console.log(err, 'vipPackage')
    })
}

const vipEquity = () => {
  user
    .vipEquity()
    .then((res) => {
      state.vipEquity = res.data
    })
    .catch((err) => {
      console.log(err, 'vipEquity')
    })
}

const goBuyVip = () => {
  user
    .vipBuy({
      vip_id: state.vipId,
    })
    .then((res) => {
      if (res.code == 1) {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          signType: res.data.signType,
          paySign: res.data.paySign,
          success(res) {
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index',
              })
            }, 2000)
          },
          fail(err) {
            console.log(`支付失败:${JSON.stringify(err)}`)
            uni.showToast({
              title: '支付失败',
              duration: 3000,
              icon: 'error',
            })
            return
          },
        })
      }
    })
    .catch((err) => {
      console.log(err, 'vipBuy')
      uni.showToast({
        title: '支付失败',
        duration: 3000,
        icon: 'error',
      })
      return
    })
}

onMounted(() => {
  const systemConfig = uni.getStorageSync(SYSTEM_CONFIG)
  state.userInfo = uni.getStorageSync(USER_INFO)
  state.paidVipAgreement = systemConfig.agreement.paid_vip_agreement
  vipPackage()
  vipEquity()
})

onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      会员中心
    </TnNavbar>
    <view class="container">
      <view class="vip-fixed" />

      <view class="" :style="{ paddingTop: `${navbarHeight + 10}px` }">
        <view class="vip-bg">
          <view class="tn-flex justify-between items-center tn-m-sm tn-pt-sm">
            <view class="justify-center items-center">
              <view class="tn-flex items-center justify-start">
                <view class="logo-pic">
                  <view
                    class="logo-image"
                    :style="
                      'background-image: url(' +
                      FILE_URL +
                      state.userInfo.avatar +
                      '); width: 110rpx;height: 110rpx;background-size: cover;overflow: hidden;'
                    "
                  />
                </view>
                <view class="tn-pr" style="position: relative">
                  <view class="tn-pr tn-pl-sm">
                    <text class="tn-text-xl tn-text-bold">{{
                      state.userInfo.nickname
                    }}</text>
                  </view>
                  <view class="tn-pr tn-pt-sm tn-pl-sm tn-text-ellipsis">
                    <text class="tn-text-sm">
                      会员有效期：{{ state.userInfo.vip_expire_time }}
                    </text>
                  </view>
                </view>
              </view>
            </view>
            <view class="justify-content-item">
              <TnIcon name="vip-text" color="#facd8c" size="120rpx" />
            </view>
          </view>
        </view>

        <view class="bg-vip">
          <view
            class="tn-flex items-center tn-flex-wrap tn-p-sm tn-pt"
            style="margin-left: 4rpx"
          >
            <!-- class="tn-p-sm tn-text-center tag-select" -->
            <view
              v-for="(item, index) in state.vipList"
              :key="index"
              :class="[tabbarItemClass(index)]"
              @click="clickVip(index)"
            >
              <view class="tn-pt-xs">
                <text class="tn-text-bold" style="color: #423418">{{
                  item.name
                }}</text>
              </view>
              <view
                class="tn-pt tn-pb-sm"
                style="color: #602309; margin-left: -8rpx"
              >
                <text class="tn-text-sm">￥</text>
                <text class="" style="font-size: 60rpx; padding-left: 4rpx">{{
                  item.price
                }}</text>
              </view>
              <view
                class=""
                style="text-decoration: line-through; color: #b18f80"
              >
                ￥{{ item.original_price }}
              </view>
            </view>
          </view>

          <view
            class="tn-text-xl tn-pt-lg tn-text-center"
            style="color: #303844"
          >
            尊享特权
          </view>

          <view class="tn-flex tn-flex-wrap justify-start tn-p">
            <view
              v-for="(item, index) in state.vipEquity"
              :key="index"
              class="tn-p-xs"
              style="width: 25%"
            >
              <view class="tn-flex tn-flex-column items-center justify-between">
                <view
                  class="icon12__item--icon tn-flex justify-center items-center"
                >
                  <image :src="FILE_URL + item.image" mode="scaleToFill" />
                </view>
                <view class="tn-text-center">
                  <text class="tn-text-ellipsis">{{ item.show_name }}</text>
                </view>
              </view>
            </view>
          </view>
          <view
            class="tn-text-xl tn-pt-lg tn-text-center"
            style="color: #303844"
          >
            更多权益敬请期待
          </view>
        </view>
      </view>

      <view class="tabbar footerfixed">
        <view class="tn-flex tn-p">
          <view class="tn-flex-1 justify-content-item tn-text-center bg-button">
            <TnButton
              width="100%"
              text-color="442C04"
              bg-color="#FFFFFF00"
              font-size="32"
              :custom-style="{
                padding: '22rpx 0',
              }"
              @tap.stop="goBuyVip"
            >
              确认协议并支付 <text class="tn-ml-xs">¥{{ state.payPrice }}</text>
            </TnButton>
          </view>
        </view>
        <view class="tn-text-sm tn-text-center">
          <text>付费即表示同意</text>
          <text
            style="color: #3288ff"
            @click="tnNavPage(state.paidVipAgreement)"
          >
            《会员服务协议》
          </text>
        </view>
      </view>

      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.container {
  // 四个角渐变底色
  .vip-fixed {
    position: absolute;
    background: linear-gradient(90deg, #151515, #151515);
    top: 0;
    width: 100%;
    transition: all 0.25s ease-out;
    z-index: -1;
    min-height: 420rpx;
  }

  .bg-button {
    background: linear-gradient(-90deg, #f9dbc0, #efb190);
    border-radius: 10rpx;
  }

  .bg-vip {
    margin-top: -50rpx;
    z-index: 9;
    position: relative;
    background-color: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
  }

  /* 胶囊banner*/
  .image-capsule {
    padding: 60rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }
  .image-piccapsule {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: center;
    border-radius: 15rpx;
  }

  /* 间隔线 start*/
  .tn-strip-bottom-min {
    width: 100%;
    border-bottom: 1rpx solid #f8f9fb;
  }

  .tn-strip-bottom {
    width: 100%;
    border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  }
  /* 间隔线 end*/

  /* 用户头像 start */
  .logo-image {
    width: 110rpx;
    height: 110rpx;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: center;
    border: 6rpx solid rgba(255, 255, 255, 0.6);
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }

  .vip-bg {
    height: 180rpx;
    border-radius: 30rpx 30rpx 0 0;
    position: relative;
    z-index: 1;
    margin: 30rpx;
    background: linear-gradient(90deg, #ecf2ff, #ecf2ff, #f6f6f6);

    &::after {
      content: ' ';
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      border-radius: inherit;
      opacity: 0.1;
      transform: scale(1, 1);
      background-size: 100% 100%;
      background-image: url(https://cdn.nlark.com/yuque/0/2024/png/280373/1709448725432-assets/web-upload/7dcac74a-4fa1-48a6-9869-78ab124e758f.png);
    }
  }

  .tag-select {
    width: 31%;
    border: 2rpx solid #fcece4;
    margin: 8rpx 1%;
    border-radius: 20rpx;
    background: linear-gradient(120deg, #fdf8f5, #fcece4);
  }
  .tag-select-no {
    width: 31%;
    border: 2rpx solid #fbf3e7;
    margin: 8rpx 1%;
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  /* 图标容器12 start */
  .icon12 {
    &__item {
      width: 30%;
      background-color: #ffffff;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 86rpx;
        height: 86rpx;
        font-size: 46rpx;
        border-radius: 50%;
        // background-color: #5b4d4b;
        box-shadow: 0rpx 10rpx 10rpx 0rpx #5b4d4b40;
        // text-shadow: 0rpx 2rpx 6rpx #3a312f;
        // color: #f9e0c2;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }

  /* 底部安全边距 start*/
  .tn-tabbar-height {
    min-height: 240rpx;
    height: calc(260rpx + env(safe-area-inset-bottom) / 2);
    height: calc(260rpx + constant(safe-area-inset-bottom));
    background-color: #ffffff;
  }

  .nav-title {
    -webkit-background-clip: text;
    color: transparent;
  }
  /* 标题 end */

  /* 底部 start*/
  .footerfixed {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.04);
  }

  .tabbar {
    align-items: center;
    min-height: 260rpx;
    padding: 0;
    height: calc(220rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(40rpx + env(safe-area-inset-bottom) / 2);
    padding-left: 10rpx;
    padding-right: 10rpx;
  }
}
/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom));
  height: calc(140rpx + constant(safe-area-inset-bottom));
}
</style>
